define([
  'jquery',
  'underscore',
  'models/User',
  'views/View',
  'hbs!template/media/image-media-viewer',
  'hbs!template/media/video-media-viewer'
], function($, _, User, View, image_template, video_template) {
  // MediaViewer
  var MediaViewer = View.extend({
    flags: {
      share: false,
      check: false,
      modal: false
      // progess
    },

    templates: { // Default templates. It'll be able to be overwritten by initialize.
      image: image_template,
      video: video_template
    },
    
    initialize: function(options) {
      options || (options = {});

      // Call to View's initialize method
      View.prototype.initialize.apply(this, options);

      // Check if are flags
      if(options.flags) {
        this.flags = options.flags;
      }

      // Check if are data
      if(options.data) {
        this.data = data;
      } else if(options.model) { // From a model
        this.model = options.model;
        this.data = {id: this.model.get("id"), type: this.model.get("type"), content: this.model.get("content")};
      } else { // Check if the options object have the type and content url.
          if(options.type && options.content) {
            this.data = {id: options.id, type: options.type, content: options.content};
          }
      }
      
      // Set the differents templates
      if(options.templates) {
        this.templates = options.templates;
      } else {
        /*this.templates =  {
          main: '', // Main template. Depends on the type of the media viewer.
          usersSelection: '', // Template for rendering the users selection. Flag share.
          check: '',
          modal: ''
        };*/
      }
    },

    render: function() {
      // Render template according to the type of data
      if(this.data.type === 'PHOTO') {
        this.template = this.templates.image;
      } else if(this.data.type === 'VIDEO') {
        this.template = this.templates.video;
      }

      // Now that the template is selected, call to View's render function.
      View.prototype.render.apply(this);

    
      
      // Render parts depending of its flags
      if(this.flags.share) {
        this.renderShare();
      }
      
      return this;
    },
    
    renderShare: function() {
      var user = new User();
      user.fetch();
      var $usersSelection = this.$("#users-selection");
      var usersSelection = new UsersSelection({
        el: $usersSelection,
        user: user,
        familiars: familiars_template,
        internals: internals_template
      });
    },
    
    serialize: function() {
      // Get the data object from View.
      var data = View.prototype.getRenderData.apply(this);
      
      // Put media data in the object for rendering them in the view.
      data.media = this.data;
      // Put the flags into the object for rendering them in the view.
      data._flags = this.flags;
      
      return data;
    }
  });

  return MediaViewer;
});